<template>
    <div style="display: flex;height: calc(100vh - 115px);padding: 30px;">
      <div class="flex divflex">
          <div class="ECharts top">
            <p><i class="el-icon-s-data icon" />事项办理统计</p>
            <div class="EC" id="matterEC"></div>
          </div>
          <div  class="ECharts bottom">
            <p><i class="el-icon-s-data icon" />人员办理统计</p>
            <div class="EC" id="personnelEC"></div>
          </div>
      </div>
      <div class="flex mapflex" id="container">
        <p><i class="el-icon-position icon" />事件地点分布</p>

      </div>
    </div>
</template>

<script>
  import * as echarts from 'echarts';
  import mapdata from './json/heatmapData';
  import {getStatistics} from "@/views/assistance/api";
  let map = null;
  export default {
    name: "index",
    data(){
      return{
      }
    },
    async created() {
      window.onLoad = async() => {
        //事项地点分布
        await this.initMap();
        this.addAreaBound();
      };
      var url = 'https://webapi.amap.com/maps?v=1.4.15&key=7f9d602f0390c726dbd6659dbea51b0f&callback=onLoad';
      var jsapi = document.createElement('script');
      jsapi.charset = 'utf-8';
      jsapi.src = url;
      document.head.appendChild(jsapi)
    },
    mounted() {
      this.getData();
    },
    methods:{
      getData() {
        getStatistics('事项').then(res => {
          const value = [];
          const label = []
          res.data.data.map(item => {
            value.push(item.count)
            label.push(item.item_name)
            this.matter(value, label)
          })
        })
        getStatistics('工作人员').then(res => {
          const value = [];
          const label = []
          res.data.data.map(item => {
            value.push(item.count)
            label.push(item.employeeName)
            this.personnel(value, label)
          })
        })
      },
      matter(value, label){
        this.matterEC = echarts.init(document.getElementById('matterEC'));
        this.matterEC.setOption({
          backgroundColor: 'rgba(0,0,0,0)',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '20%',
            right: '5%',
            left: '10%',
            bottom: '12%'
          },
          xAxis: [{
            type: 'category',
            data: label,
            axisLine: {
              show: false
            },
            axisLabel: {
              margin: 10,
              color: '#070707ab',
              interval:0,
              // rotate:15,
              textStyle: {
                fontSize: 11
              },
              formatter:function(params) {
                let newParamsName = "";
                let paramsNameNumber = params.length;
                let provideNumber = 9;  //一行显示几个字
                let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }

                } else {
                  newParamsName = params;
                }
                return newParamsName
              },
            },
            axisTick: {
              show: false
            }
          }],
          yAxis: [{
            name: "(件)",
            nameTextStyle:{//y轴上方单位的颜色
              color:'#070707ab'
            },
            axisLabel: {
              formatter: '{value}',
              color: '#070707ab',
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(0,186,255,.6)'
              }
            },
            splitLine: {
              show:true,
              lineStyle: {
                type:'dashed',
              }
            }
          }],
          series: [{
            type: 'bar',
            data: value,
            barWidth: '28px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,244,255,1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }], false),
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
              }
            },
            label: {
              normal: {
                show: true,
                lineHeight: 30,
                formatter: '{c}',
                position: 'top',
                textStyle: {
                  color: '#00D6F9',
                  fontSize: 15
                }

              }
            }
          }]
        })
      },
      personnel(value, label){
        this.matterEC = echarts.init(document.getElementById('personnelEC'));
        this.matterEC.setOption({
          backgroundColor: 'rgba(0,0,0,0)',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '20%',
            right: '5%',
            left: '10%',
            bottom: '12%'
          },
          xAxis: [{
            type: 'category',
            data: label,
            axisLine: {
              show: false
            },
            axisLabel: {
              margin: 10,
              color: '#070707ab',
              textStyle: {
                fontSize: 14
              },
            },
            axisTick: {
              show: false
            }
          }],
          yAxis: [{
            name: "(件)",
            nameTextStyle:{//y轴上方单位的颜色
              color:'#070707ab'
            },
            axisLabel: {
              formatter: '{value}',
              color: '#070707ab',
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(0,186,255,.6)'
              }
            },
            splitLine: {
              show:true,
              lineStyle: {
                type:'dashed',
              }
            }
          }],
          series: [{
            type: 'bar',
            data: value,
            barWidth: '28px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,244,255,1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }], false),
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
              }
            },
            label: {
              normal: {
                show: true,
                lineHeight: 30,
                formatter: '{c}',
                position: 'top',
                textStyle: {
                  color: '#00D6F9',
                  fontSize: 15
                }

              }
            }
          }]
        })
      },
      daysBetween(){
        let today = new Date();
        let dd = String(today.getDate()).padStart(2, '0');
        let mm = String(today.getMonth() + 1).padStart(2, '0');
        let yyyy = today.getFullYear();
        let DateOne = yyyy + '-' + mm + '-' + dd;
        let DateTwo = '2022-02-24';
        let OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-'));
        let OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1);
        let OneYear = DateOne.substring(0,DateOne.indexOf ('-'));

        let TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-'));
        let TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1);
        let TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-'));

        let cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000);
        return Math.abs(cha);
      },

  async initMap() {
        return new Promise((resolve) => {
          map = new AMap.Map("container", {
            resizeEnable: true,
            center: [120.915745,30.900203],
            zoom: 12
          });

          if (!isSupportCanvas()) {
            alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
          }

          //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
          //参数说明如下:
          /* visible 热力图是否显示,默认为true
           * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
           * radius 势力图的每个点的半径大小
           * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
           *	{
           .2:'rgb(0, 255, 255)',
           .5:'rgb(0, 110, 255)',
           .8:'rgb(100, 0, 255)'
           }
           其中 key 表示插值的位置, 0-1
           value 为颜色值
           */
          var heatmap;
          map.plugin(["AMap.Heatmap"], function () {
            //初始化heatmap对象
            heatmap = new AMap.Heatmap(map, {
              radius: 50, //给定半径
              opacity: [0, 0.8]
              ,
              gradient:{
                  0.5: 'blue',
                  0.65: 'rgb(117,211,248)',
                  0.7: 'rgb(0, 255, 0)',
                  0.9: '#ffea00',
                  1.0: 'red'
              }

            });
            //设置数据集：该数据为北京部分“公园”数据
            heatmap.setDataSet({
              data: mapdata,

            });
          });

          //判断浏览区是否支持canvas
          function isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
          }
          resolve()
        })
      },
      addAreaBound() {
        AMap.plugin('AMap.DistrictSearch', () => {
          const districtSearch = new AMap.DistrictSearch({
            extensions: 'all',
            level: 'district'
          });

          districtSearch.search('嘉善县', (status, result) => {
            const bounds = result.districtList[0].boundaries;
            //  生成行政区划polygon
            const polygon = new AMap.Polygon({
              map: map,
              strokeWeight: 1,
              strokeColor: 'rgb(0, 155, 255)',
              path: bounds[0],
              fillOpacity: 0.2,
              fillColor: 'rgb(102, 153, 255)',
              zIndex: 5
            })
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.flex{
  flex: 1;
  text-align: center;
}
p{
  color: #000;
  margin: 0;
  background-color: #dcebfc;
  line-height: 40px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  z-index: 1;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
  .icon{
    color: #3489df;
    padding: 0 5px;
  }
}
  .divflex{
    display: flex;
    flex-direction:column;
    margin-right: 30px;

    .ECharts{
      flex: 1;
      margin-bottom: 4px;
      border: 1px solid #dcebfc;
      background-color: #dcebfc47;
      border-radius: 10px;
      box-shadow: 5px 5px 5px #d5d5d5;
      .EC{
        height:90%;
      }
    }
    .top{
      margin-bottom: 10px;
    }
    .bottom{
      margin-top: 10px
    }
  }
  .mapflex{
    border: 1px solid #dcebfc;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #d5d5d5;
  }
</style>
